<template>
  <el-popover placement="right" :width="400" trigger="click">
    <template #reference>
      <el-link type="primary">添加</el-link>
    </template>
    <el-form label-width="100px">
      <el-form-item label="权限名称">
        <el-input placeholder="输入名称" v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="访问路径">
        <el-input placeholder="输入访问的路径" v-model="path"></el-input>
      </el-form-item>
      <el-form-item label="操作">
        <el-input placeholder="输入名称" v-model="action"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="handleAdd"> 立即添加</el-button>
  </el-popover>
</template>
<script>
import { ElMessage } from 'element-plus';
import { addRole } from '@/api/role';

export default {
  props: ['node', 'nodedata'],
  data() {
    return {
      name: '',
      path: '',
      action: '',
    };
  },
  mounted() {
    // console.log('node', this.node);
    // console.log('nodedata', this.nodedata);
    // console.log('----------', this);
  },
  methods: {
    async handleAdd() {
      const res = await addRole({
        pid: this.nodedata.id,
        name: this.name,
        action: this.action,
        path: this.path,
      });

      console.log('res', res);
      const { statusText, data } = res;
      if (statusText === 'Created') {
        ElMessage({
          message: '添加成功',
          type: 'success',
        });

        this.name = '';
        this.action = '';
        this.path = '';

        this.$emit('created');
      }
    },
  },
};
</script>
